import React, { useState, useEffect } from 'react'
import { Card, Button, Table, Modal, Form, Input, Select, message } from 'antd';
import { findAllCategory,addCategory } from "../../apis/categoryApi"
const { Option } = Select;

const layout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};
export default function ProductCategory() {
  const [data, setData] = useState([])
  const [parentId, setParentId] = useState(0)
  const [visible, setVisible] = useState(false)
  const [typeVisible, setTypeVisible] = useState("一级分类")
  const [parentData,setParentData] = useState([])
  useEffect(() => {
    fecthData()
  }, [parentId])


  const onFinish =async (values) => {
    values.parentId = values.parentId ? values.parentId : 0
    console.log(values);
    const res = await addCategory(values)
    if(res.data.code){
      message.success("添加成功")
      setVisible(false)
    }else{
      message.error("添加失败")
    }

  }
  const fecthData = async () => {
    const res = await findAllCategory({ parentId })
    console.log(res);
    setData(res.data.data.data)
  }
  const handleOk = () => { }
  const handleCancel = () => {
    setVisible(false)
  }
  // 表头
  const findSubsCategory = (value) => {
    setParentId(value._id)
  }
  const typeChange =async (value)=>{
    if(value == "二级分类"){
      const res = await findAllCategory({parentId:0})
      setParentData(res.data.data.data)
    }
    setTypeVisible(value)
  }
  const columns = [
    {
      title: '类型名字',
      dataIndex: 'name',
      align: 'center',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '类别',
      dataIndex: 'type',
      align: 'center'
    },
    {
      title: '操作',
      render: (pa1, pa2) => {
        return (
          <>
            {parentId == 0 ? <Button type='primary' onClick={() => findSubsCategory(pa1)}>查看子分类</Button> : null}
            &nbsp;&nbsp;&nbsp;&nbsp;
            <Button>删除</Button>
          </>
        )
      }
    },
  ];
  return (
    <>
      <Card
        title={parentId == 0 ? "商品分类" : <Button onClick={() => setParentId(0)} type='dashed'>返回</Button>}
        extra={<Button type='default' onClick={() => setVisible(true)}>添加</Button>}
        style={{
          width: "100%",
        }}
      >
        <Table
          columns={columns}
          dataSource={data}
          bordered
          rowKey="_id"
          pagination={{ defaultCurrent: 1, defaultPageSize: 8, showQuickJumper: true, showSizeChanger: true, pageSizeOptions: [8, 16] }}
        />
      </Card>
      <Modal title="添加分类" visible={visible} onOk={handleOk} onCancel={handleCancel}>
        <Form {...layout} name="control-hooks" onFinish={onFinish}>
          <Form.Item
            name="name"
            label="分类名字"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="type"
            label="分类类型"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Select
              placeholder="分类类型"
              onChange={typeChange}
              allowClear
            >
              <Option value="一级分类">一级分类</Option>
              <Option value="二级分类">二级分类</Option>
            </Select>
          </Form.Item>

          {typeVisible == "一级分类" ? null : <Form.Item
            name="parentId"
            label="父级分类"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Select
              placeholder="请选中父级分类"
              allowClear
            >
              {parentData.map(item=>{
                return <Option key={item._id} value={item._id}>{item.name}</Option>
              })}
              
            </Select>
          </Form.Item>}



          <Form.Item {...tailLayout}>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </>
  )
}
